<template>
  <view class="container">
    <view class="header">
      <view class="searchbox">
        <f-calendar v-model:value="formData.date" placeholder="请选择日期" @confirm="getData"></f-calendar>
      </view>
      <view class="tui-header-bottom">
          <view class="tui-bottom-item">
            <f-data-picker v-model:value="formData.cate_id" :columns="cateList" placeholder="分类" @change="getData">
              <template #default="{value}">
                <div class="flex">
                  <view class="tui-bottom-text">{{value}}</view>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </div>
              </template>
            </f-data-picker>
          </view>
          <view class="tui-bottom-item">
            <f-data-picker v-model:value="formData.cate_id" :columns="cateList" placeholder="活动" @change="getData">
              <template #default="{value}">
                <div class="flex">
                  <view class="tui-bottom-text">{{value}}</view>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </div>
              </template>
            </f-data-picker>
          </view>
          <view class="tui-bottom-item">
            <f-data-picker v-model:value="formData.store_id" :columns="storeList" placeholder="门店" @change="getData">
              <template #default="{value}">
                <div class="flex">
                  <view class="tui-bottom-text">{{value}}</view>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </div>
              </template>
            </f-data-picker>
          </view>
      </view>
    </view>
    <view class="content">
      <view class="title">当前门店：{{data.store_name}}</view>
      <view class="grid">
        <view class="item">
          <view class="item-label">团队人数</view>
          <view class="item-value">{{data.tuandui_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">观看人数</view>
          <view class="item-value">{{data.guankan_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">上线率</view>
          <view class="item-value">{{data.shangxian_rate}}</view>
        </view>
        <view class="item">
          <view class="item-label">答题人数</view>
          <view class="item-value">{{data.dati_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">答对人数</view>
          <view class="item-value">{{data.dadui_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">正确率</view>
          <view class="item-value">{{data.dadui_rate}}</view>
        </view>
        <view class="item">
          <view class="item-label">红包数量</view>
          <view class="item-value">{{data.hongbao_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">红包金额</view>
          <view class="item-value">{{data.hongbao_sum}}</view>
        </view>
        <view class="item">
          <view class="item-label">新增用户</view>
          <view class="item-value">{{data.yesterday_add}}</view>
        </view>
        <view class="item">
          <view class="item-label">完播人数</view>
          <view class="item-value">{{data.wanbo_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">完播率</view>
          <view class="item-value">{{data.wanbo_rate}}</view>
        </view>
      </view>
    </view>
    <view v-for="item,index in storeList" :key="index" class="content">
      <view class="title" @click="getData(item.id, index)">子门店：{{item.name}}</view>
      <view v-if="item.open" class="grid">
        <view class="item">
          <view class="item-label">团队人数</view>
          <view class="item-value">{{item.info.tuandui_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">观看人数</view>
          <view class="item-value">{{item.info.guankan_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">上线率</view>
          <view class="item-value">{{item.info.shangxian_rate}}</view>
        </view>
        <view class="item">
          <view class="item-label">答题人数</view>
          <view class="item-value">{{item.info.dati_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">答对人数</view>
          <view class="item-value">{{item.info.dadui_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">正确率</view>
          <view class="item-value">{{item.info.dadui_rate}}</view>
        </view>
        <view class="item">
          <view class="item-label">红包数量</view>
          <view class="item-value">{{item.info.hongbao_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">红包金额</view>
          <view class="item-value">{{item.info.hongbao_sum}}</view>
        </view>
        <view class="item">
          <view class="item-label">新增用户</view>
          <view class="item-value">{{item.info.yesterday_add}}</view>
        </view>
        <view class="item">
          <view class="item-label">完播人数</view>
          <view class="item-value">{{item.info.wanbo_count}}</view>
        </view>
        <view class="item">
          <view class="item-label">完播率</view>
          <view class="item-value">{{item.info.wanbo_rate}}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import FDataPicker from '@/addon/htscrm/components/f-data-picker/index.vue'
import FCalendar from '@/addon/htscrm/components/f-calendar/index.vue'
import { onLoad } from '@dcloudio/uni-app';
import { getStoreTreeApi } from '@/addon/htscrm/api';
import { getAdminAnalysisDataApi } from '@/addon/htscrm/api/admin/analysis';

const formData = ref({
  cate_id: '',
  activity_id: '',
  store_id: 0,
  date: ''
})

const cateList = ref<any[]>([
  {
    id: '1',
    name: '全部'
  }
])

const activityList = ref<any[]>([
  {
    id: '1',
    name: '全部'
  }
])

const storeList = ref<any[]>([])

const data = ref<any>({
  "store_id": 1,
  "store_name": "",
  "tuandui_count": 0,
  "yingqi_count": 0,
  "shangxian_rate": "0.00%",
  "guankan_count": "0",
  "wanbo_count": "0",
  "wanbo_rate": "0.00%",
  "dadui_rate": "0.00%",
  "hongbao_count": 0,
  "hongbao_sum": "0.00",
  "dati_count": "0",
  "dadui_count": "0",
  "yesterday_add": 0,
  "debug": ""
})

/**
 * 获取数据
 */
async function getData(id=0, index=-1) {
  const params = {
    ...formData.value
  }
  if(id) {
    params.store_id = id
    if(storeList.value[index].info) {
      storeList.value[index].open = !storeList.value[index].open
      return
    }
  }
  const res = await getAdminAnalysisDataApi(params)
  if(res.code == 1) {
    if(index>-1) {
      storeList.value[index].info = res.data
      storeList.value[index].open = true
    } else {
      data.value = res.data
    }
  }
}

/**
 * 获取分类列表
 */
async function getCateList() {
  console.log(formData.value);
  
}

/**
 * 获取活动列表
 */
async function getActivityList() {
  console.log(formData.value);
  
}

/**
 * 获取门店列表
 */
async function getStoreList() {
	const res = await getStoreTreeApi()
	storeList.value = res.data
}

onLoad(async () => {
  // 获取分类列表
  await getCateList()
  // 获取活动列表
  await getActivityList()
  // 获取门店列表
  await getStoreList()
  getData()
})

</script>

<style lang="scss" scoped>

::v-deep .radius {
  border: none;
  padding: 0;
}
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;

  .header {
    background-color: #fff;
    .searchbox {
      background: #fff;
      padding: 20rpx;
    }

    .search-input {
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 80rpx;
      padding: 10rpx 20rpx;
      margin: 0rpx;
    }

    .search-input input {
      height: 60rpx;
      padding: 0 20rpx;
    }

    .tui-header-bottom {
      margin-top: 0rpx;
      height: 80rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      align-items: flex-start;
      overflow: hidden;
      display: flex;
    }

    .tui-bottom-text {
      line-height: 24rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tui-bottom-item {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18rpx 12rpx;
      border-radius: 40rpx;
      box-sizing: border-box;
      background: #f2f2f2;
      margin-right: 20rpx;
      white-space: nowrap;

      .flex {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
    }

    .tui-bottom-item:last-child {
      margin-right: 0;
    }
    // .tui-btmItem-active {
    //   border-bottom-left-radius: 0;
    //   border-bottom-right-radius: 0;
    // }

    .tui-bold {
      font-weight: bold;
    }

    .tui-active {
      color: #5677fc;
    }
  }

  .content {
		// min-height: 300rpx;
		background-color: white;
		border-radius: 20rpx;
		margin: 40rpx;
		padding: 10rpx;
		box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .1);

    .title {
      font-weight: bolder;
      padding: 15rpx;

    }

    .grid {
      display: grid;
      grid-gap: 20rpx;
      border-top: 1px solid #eeeeee;
      grid-template-columns: repeat(auto-fill , 200rpx);
      grid-template-rows: repeat(1	,150rpx);
    
      .item {
        padding: 30rpx;
        font-size: 1rem;
        font-weight: bold;
        line-height: 60rpx;
      }
    }
	}
}
</style>